import React, { PureComponent } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { List, Card } from 'antd';
import { Loading } from '@/models/connect';
import { StateType } from './model';

interface State {
  accountCenter: StateType;
  loading: Loading;
}

interface CenterProps {
  dispatch: Dispatch;
  accountCenter: StateType;
  loading: boolean;
  location: any;
  match: any;
}

interface CenterState {}

@connect(({ accountCenter, loading }: State) => ({
  accountCenter,
  loading: loading.models.accountCenter,
}))
class Center extends PureComponent<CenterProps, CenterState> {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'accountCenter/fetchProjectList' });
  }

  render() {
    const {
      accountCenter: { projectList },
    } = this.props;
    return (
      <List
        rowKey="id"
        grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }}
        dataSource={projectList}
        renderItem={item => (
          <List.Item>
            <Card hoverable cover={<img alt={item.title} src={item.cover} />}>
              <Card.Meta title={<a>{item.title}</a>} description={item.subDescription} />
            </Card>
          </List.Item>
        )}
      />
    );
  }
}

export default Center;
